// 计件工资详情

<template>
  <view class="search-button-page-200">
    <mes-search
      placeholder="单据编号"
      v-model="postForm.purchase_code"
      @search="resetPaging(), getData()"
    ></mes-search>
    <view v-if="!noData" class="top">
      <view class="top-name">{{ workForm.name }}</view>
      <view class="top-code">{{ workForm.men_code }}</view>
    </view>
    <mes-tip v-show="noData"></mes-tip>
    <mes-collapse :form="collapseForm"></mes-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noData: false,
      workForm: {},
      hasMore: true,
      postForm: {
        work_id: '',
        page: 1,
        purchase_code: ''
      },
      collapseForm: {
        top: 20,
        // 自定义组件类名（可不传）
        className: '',
        // 展示隐藏详情(必要)
        showDetail: (item) => {
          item.isShow = !item.isShow
        },
        // 详情数据
        items: []
      }
    }
  },
  onLoad(options) {
    this.workForm = JSON.parse(options.form)
    this.postForm.work_id = this.workForm.id
    console.log('workForm', this.workForm)
    this.getData()
  },
  onReachBottom() {
    if (!this.hasMore) return
    this.postForm.page++
    this.getData()
  },
  methods: {
    // 重置分页
    resetPaging() {
      this.hasMore = true
      this.postForm.page = 1
      this.collapseForm.items = []
    },
    // 获取列表
    async getData() {
      let res = await this.$api.prod.other.wages(this.postForm)
      if (res.code == 200) {
        console.log('职员列表')
        let list = []
        res.data.list.forEach((item) => {
          list.push({
            // 标题
            main_title: item.purchase_codes,
            // 副标题
            sub_title: '单据日期：',
            // 必须传 展开关闭详情
            isShow: false,
            // 展开数据详情
            detailItems: [
              {
                title: '车间',
                value: item.workshop_id
              },
              {
                title: '商品详情',
                value: item.goods_info
              },
              {
                title: '合计数量',
                value: item.number
              },
              {
                title: '计件工资',
                value: item.wages_free
              }
            ]
          })
        })
        this.hasMore = res.data.list.length ? true : false
        this.collapseForm.items = [...this.collapseForm.items, ...list]
        this.noData = !this.collapseForm.items.length
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 702rpx;
  margin: 0 auto;
  .top-name {
    font-weight: 500;
    color: #111111;
  }
  .top-code {
    font-size: 24rpx;
    color: #666666;
  }
}
</style>
